<template>
  <div id="app">
      用户名<el-input v-model="userObj.uname" placeholder="请输入用户名"></el-input>
      密码<el-input v-model="userObj.password" placeholder="请输入密码"></el-input>
      邮箱<el-input v-model="userObj.email" placeholder="请输入邮箱"></el-input>

    <el-button type="success" @click="save">添加</el-button>
     <el-button @click="clear">重置</el-button>



     <el-table
        ref="multipleTable"
        :data="tableData"
      >
        <el-table-column label="编号" prop="id">
          <template slot-scope="scope">
            {{(scope.$index+1)}}
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="uname"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="操作">
         
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userObj:{
        uname:"",
        password:"",
        email:""
      },
       tableData: [{
          id: 1,
          uname: 'jack',
          password: '123456',
          email:'123@126.com'
        }, {
          id:2,
          uname: 'rose',
          password: '789456',
          email:'456@126.com'
        }, {
          id:3,
          uname: 'tom',
          password: '456321',
          email:'789@126.com'
        }]
    };

  },
   methods: {
     save(){
       this.tableData.push(this.userObj)
       console.log(11111);
     },

 clear(){
                this.userObj={
                    uname:" ",
                    password:"",
                    email:""
                }
            },
    del(id){
    //  this.tableData.splice(this.id,1)
    let index=this.tableData.findIndex(function(v,index){
      return v.id=id
    })

    this.tableData.splice(index,1)

    }
    }
};
</script>

<style lang="less" scoped>
#app{
  width: 1000px;
}
</style>